<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1" name="viewport">
    <link rel="stylesheet" th:href="@{/admin/assets/css/bootstrap-clearmin.min.css}" type="text/css">
    <link rel="stylesheet" th:href="@{/admin/assets/css/roboto.css}" type="text/css">
    <link rel="stylesheet" th:href="@{/admin/assets/css/font-awesome.min.css}" type="text/css">
    <title>管理员登录</title>
    <style></style>
</head>
<body class="cm-login">

<div class="text-center" style="padding:90px 0 30px 0;background:#fff;border-bottom:1px solid #ddd">
    <img alt="" height="45" src="" th:src="@{/admin/assets/img/logo-big.svg}" width="300">
</div>

<div class="col-sm-6 col-md-4 col-lg-3" style="margin:40px auto; float:none;">
    <form th:action="@{/admin/login}">
        <div class="col-xs-12">
            <div class="form-group">
                <div class="input-group">
                    <div class="input-group-addon"><i class="fa fa-fw fa-user"></i></div>
                    <input class="form-control" id="username" name="username" placeholder="Username" th:autofocus="null eq ${adminObject}"
                           th:value="(null ne ${adminObject} ? ${adminObject.name})"
                           type="text">
                </div>
            </div>
            <div class="form-group">
                <div class="input-group">
                    <div class="input-group-addon"><i class="fa fa-fw fa-lock"></i></div>
                    <input class="form-control" id="password" name="password" placeholder="Password"
                           th:value="(null ne ${adminObject} ? ${adminObject.password})" type="password">
                </div>
            </div>
            <div class="form-group">
                <div class="input-group" style="width: 100%;">
                    <div id="captcha">
                        <p id="wait">正在加载验证码......</p>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-xs-6">
            <div class="checkbox"><label><input id="remember" name="remember" th:checked="null ne ${adminObject}" type="checkbox" value="true">记住我</label></div>
        </div>
        <div class="col-xs-6">
            <button class="btn btn-block btn-primary" id="login_form_btn" th:autofocus="null ne ${adminObject}" type="button">登录</button>
        </div>
    </form>
</div>
<script th:src="@{/admin/assets/js/lib/jquery.min.js}"></script>
<script th:src="@{/admin/assets/js/bootstrap.min.js}"></script>
<script th:src="@{/admin/assets/js/demo/popovers-tooltips.js}"></script>
<script th:src="@{/admin/assets/js/gt.js}"></script>
<script th:src="@{/admin/assets/layer/layer.js}"></script>
<script type="text/javascript">
    $(function () {
        // 初始化滑块验证码
        $.ajax({
            url: "[[@{/admin/getGee}]]",
            type: "get",
            dataType: "json",
            success: function (data) {
                //请检测data的数据结构， 保证data.gt, data.challenge, data.success有值
                initGeetest({
                    // 以下配置参数来自服务端 SDK
                    gt: data.gt,
                    challenge: data.challenge,
                    offline: !data.success,
                    new_captcha: true,
                    width: '100%'
                }, function (captchaObj) {
                    // 将验证码加到id为captcha的元素里，同时会有三个input的值用于表单提交
                    captchaObj.appendTo("#captcha");
                    captchaObj.onReady(function () {
                        $("#wait").hide();
                    });
                })
            }
        });

        // 表单提交
        $('#login_form_btn').click(function () {
            let load_index = layer.load(1);
            let $this = $(this);
            $this.attr('disabled', true);// 禁用提交按钮

            // 验证码验证
            // 三个隐藏输入框无值，说明验证失败
            let $inputs = $('input:hidden');
            let isLack = 0;
            $.each($inputs, function (i, e) {
                if ($(e).val() == '' || $(e).val().length === 0) {
                    ++isLack;
                }
            });
            if (isLack > 0) {// 验证码不成功
                layer.close(load_index);
                layer.msg('请完成验证。', {
                    time: 1000
                }, function () {
                    $this.attr('disabled', false);
                });
                return false;
            }

            // 数据验证
            let $usernameInput = $('#username');
            let username = $usernameInput.val();
            $usernameInput.val('');
            let $passwordInput = $('#password');
            let password = $passwordInput.val();
            $passwordInput.val('');
            let $remember = $('#remember:checked').length > 0;

            $.post('[[@{/admin/login}]]', {
                username: $.trim(username),
                password: $.trim(password),
                isRemember: $remember
            }, function (data) {
                layer.close(load_index);
                if (0 == data.code) {
                    location.href = '[[@{/admin/index}]]';
                    layer.msg(data.msg, {
                        time: 1500
                    });
                } else {
                    layer.msg(data.msg, {
                        time: 1000
                    }, function () {
                        $this.attr('disabled', false);// 启用提交按钮
                        // location.reload();
                    });
                }
            }, 'json');

            return false;
        });
    });
</script>
</body>
</html>
